<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <pre>

            Vue常见指令 
            1.v-text指令作用是设置标签的文本内容（textContent）
                默认写法会替换标签内部的全部内容，使用差值表达式可以替换内容
                内部支持写表达式，但是无论内部写什么最后只能解析成文字
            2.v-html 指令是 设置元素的innerHTML
                    内容中有Html结构会被解析为标签

        </pre>


    <div class="app">

        {{message}}
    </div>

    <div id="first">
        {{message}}
        <h2> {{school.name}} {{  school.mobile }} </h2>

        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[1] }}</li>
            <li>{{ campus[2] }}</li>

        </ul>

    </div>

    <div id="second">

        <h2 v-text="content"></h2>
        <h2 v-html="content"></h2>

    </div>



</body>
<script src="../vue.js"></script>
<script>

    var app = new Vue({

        el: ".app",
        data: {
            message: "你好李浩"
        }

    })


    var app1 = new Vue({

        el: "#first",
        data: {
            message: "Old Lee",
            school: {
                name: "白马程序员",
                mobile: "666-666-666"
            },
            campus: ["北京校区", "上海校区", "内蒙古校区", "东北校区"]
        }
    })

    var app2 = new Vue({

        el: "#second",
        data: {

            content: "<a href='http://www.baidu.com'>这是用来看v-text和v-html的区别</a>"


        }


    })


</script>

</html>